<script setup>
import { ref } from 'vue'

const activeIndex = ref(0)
</script>

<template>
  <!-- 头部 -->
  <view class="goods-header">
    <view class="header-top">
      <image src="/src/static/images/海报.jpg" mode="aspectFill" />
    </view>
    <view class="header-bottom">
      <view class="box">
        <view class="goods-title">
          <view class="left">
            <image src="/src/static/uploads/茶百道.png" mode="aspectFill" />
          </view>
          <view class="right">
            <text class="name">茶百道(上海店)</text>
            <text>4.7星 | 准时宝 | 配送约45分钟</text>
          </view>
        </view>
        <view class="notice">公告:茶百道给你轻轻的快乐!轻咖啡因鲜奶茶,让身体轻负担;</view>
      </view>
    </view>
  </view>
  <!-- 身体 -->
  <view class="goods-body">
    <view class="body-title">
      <view class="left">
        <text class="active">点菜</text>
        <text>套餐</text>
        <text>评价</text>
      </view>
      <view class="right">
        <text class="iconfont icon-sousuo">搜索</text>
      </view>
    </view>
    <!-- 分类 -->
    <view class="categorie">
      <!-- 左侧：一级分类 -->
      <scroll-view class="primary" scroll-y>
        <view
          class="item"
          v-for="(item, index) in 4"
          :key="index"
          :class="{ active: index === activeIndex }"
          @tap="activeIndex = index"
        >
          <text class="name">招牌鲜果</text>
        </view>
      </scroll-view>
      <!-- 右侧：二级分类 -->
      <scroll-view enable-back-to-top class="secondary" scroll-y>
        <view class="shop-item" v-for="item in 20" url="/pages/goods/goods" :key="item.id">
          <view class="img">
            <image class="image" mode="aspectFit" src="/src/static/uploads/1-可可系列.jpg" />
          </view>
          <view class="content">
            <view class="name">可可系列</view>
            <view class="notice">店铺公告：d5fsdf5焚枯食淡加快速度防溺水s</view>
            <view class="price">
              <view class="startPrice">起送价:<text>12元</text></view>
              <view class="endPrice">配送价:<text>2元</text></view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style lang="less">
page {
  background-color: #aeaeae;
}
/* 店家头部 */
.goods-header {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 380rpx;
  .header-top {
    height: 140rpx;
    background-color: aquamarine;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .header-bottom {
    position: relative;
    .box {
      position: absolute;
      top: -50rpx;
      left: 50%;
      transform: translateX(-50%);

      padding: 20rpx;
      background-color: #fff;
      border-radius: 16rpx;
      .goods-title {
        display: flex;
        .left {
          margin-right: 18rpx;
          width: 142rpx;
          height: 142rpx;
          image {
            width: 100%;
            height: 100%;
            border-radius: 16rpx;
          }
        }
        .right {
          display: flex;
          flex-direction: column;
          justify-content: center;
          text {
            margin-bottom: 18rpx;
            font-size: 28rpx;
            color: #1b1b1b;
          }
          .name {
            font-size: 42rpx;
          }
        }
      }
      .notice {
        margin-top: 18rpx;
        font-size: 28rpx;
        color: #aeaeae;
        /* 溢出字体隐藏 */
        max-width: 664rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
/* 店家主体 */
.goods-body {
  background-color: #fff;
  .body-title {
    padding: 0 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      justify-content: center;
      text {
        display: block;
        margin-right: 32rpx;
        height: 58rpx;
        line-height: 58rpx;
        font-size: 28rpx;
        color: #aeaeae;
      }
      .active {
        border-bottom: 4rpx solid red;
      }
    }
    .right {
      width: 116rpx;
      height: 58rpx;
      text-align: center;
      line-height: 58rpx;
      border-radius: 58rpx;
      background-color: #f0eeee;
      border: 1px solid #e0dddd;
      text {
        font-size: 26rpx;
        color: #aeaeae;
      }
    }
  }
  /* 分类 */
  .categorie {
    margin-top: 20rpx;
    flex: 1;
    min-height: 400rpx;
    display: flex;
    background-color: pink;
    .primary {
      overflow: hidden;
      width: 180rpx;
      height: 100%;
      flex: none;
      background-color: #f6f6f6;
      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 96rpx;
        font-size: 26rpx;
        color: #595c63;
        position: relative;
        &::after {
          content: '';
          position: absolute;
          left: 42rpx;
          bottom: 0;
          width: 96rpx;
          border-top: 1rpx solid #e3e4e7;
        }
      }
      .active {
        background-color: #fff;
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 8rpx;
          height: 100%;
          background-color: #27ba9b;
        }
      }
    }
  }
  .primary .item:last-child::after,
  .primary .active::after {
    display: none;
  }
  .secondary {
    background-color: #fff;
    .shop-item {
      display: flex;
      margin: 18rpx;
      border: 1px solid #3c3b3b;
      border-radius: 15rpx;
      .img {
        margin-right: 18rpx;
        width: 180rpx;
        height: 180rpx;
        image {
          width: 100%;
          height: 100%;
          border-radius: 15rpx;
        }
      }
      .content {
        flex: 1;
        .name {
          font-size: 35rpx;
          font-weight: 600;
          line-height: 58rpx;
        }
        .notice {
          font-size: 28rpx;
          line-height: 48rpx;
          color: #3c3b3b;
          /* 溢出隐藏设置 */
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          max-width: 420rpx;
          text-overflow: ellipsis;
        }
        .price {
          margin-right: 15rpx;
          display: flex;
          justify-content: space-between;
          font-size: 28rpx;
          line-height: 48rpx;
          color: #3c3b3b;
          text {
            color: #cf4444;
          }
        }
      }
    }
  }
}
</style>
